<template>
    <div class="authority">
        <div class="bglxx">
            <div class="tabs">
                <div v-for="(item, index) in ldTabs" :class="currentIndex == index ? 'tab active' : 'tab'"
                    @click="changeTab(index)">{{ item }}</div>
            </div>
        </div>
        <div class="info-box" v-if="ldData.length > 0">
            <div class="item">
                <img src="@/assets/index_26.png" alt="" class="img">
                <div class="right">
                    <div class="blue">{{ ldData[currentIndex].totalArea }} ㎡</div>
                    <div>总建筑面积</div>
                </div>
            </div>
            <div class="item">
                <img src="@/assets/pic_02.png" alt="" class="img">
                <div class="right">
                    <div class="blue">{{ ldData[currentIndex].coverArea }} ㎡</div>
                    <div>占地面积</div>
                </div>
            </div>
            <div class="item">
                <img src="@/assets/pic_04.png" alt="" class="img">
                <div class="right">
                    <div class="blue">{{ ldData[currentIndex].totalFloor }}</div>
                    <div>总层数</div>
                </div>
            </div>
            <div class="item">
                <img src="@/assets/pic_05.png" alt="" class="img">
                <div class="right">
                    <div class="blue">{{ ldData[currentIndex].createYear }}</div>
                    <div>建设年代</div>
                </div>
            </div>
        </div>
        <div class="floors" v-if="ldData.length > 0">
            <div v-for="(item, index) in ldData[currentIndex].floors"
                :class="currentFloor == index ? 'tab active' : 'tab'" @click="changeFloor(item, index)">{{ item.floor }}
            </div>
        </div>
        <div class="gva-table-box unit">
            <div class="gva-btn-list">
                <el-button type="primary" icon="plus" @click="addRooms">新增房间</el-button>
            </div>
            <el-table :data="tableData" row-key="id">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="房号/房名" prop="roomNo">
                </el-table-column>
                <el-table-column align="left" label="房间面积" prop="area"></el-table-column>
                <el-table-column align="left" label="房间类型" prop="roomTypeSec">

                </el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="160">
                    <template #default="scope">
                        <el-button type="primary" link icon="edit" @click="editRooms(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link icon="delete" @click="delUnit(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增房间 -->
        <el-drawer v-model="dialog1" :size="1000" :before-close="handleClose1" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ dialog1Title }}</span>
                    <div>
                        <el-button @click="closeDialog1">取消</el-button>
                        <el-button type="primary" @click="enterDialog">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="dialog1" ref="fjForm" label-width="150" :model="form" :rules="rules">
                <el-form-item label="房间名" prop="roomId">
                    <el-select v-model="form.roomId" placeholder="请选择" style="width: 200px" @change="changeRoom">
                        <el-option v-for="item in fangjianData" :key="item.id" :label="item.roomNo" :value="item.id" />
                    </el-select>
                    <span style="margin-left: 4px;color: #FF473E;">注：有房号填房号，无房号填房名</span>
                </el-form-item>
                <el-form-item label="房间类型" prop="roomTypeId">
                    <div style="display: flex;">
                        <el-select v-model="form.type" placeholder="请选择" style="width: 200px;margin-right: 4px;" @change="changeArea">
                            <el-option v-for="item in yfTypeList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-select v-model="form.roomTypeId" placeholder="请选择" style="width: 200px">
                            <el-option v-for="item in yfTypes" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="房间面积" prop="contact">
                    <el-input v-model="form.roomArea" placeholder="请输入" disabled style="width: 400px" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.notes" type="textarea" :rows="6" style="width: 400px;" />
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script setup>
import {
    unitRoom,
    unitBuilding,
    allUr,
    addRoom,
    editRoom,
    delRoom
} from '@/api/unit'
import {
    getFangJianList
} from '@/api/shujuchuli'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import AMapLoader from '@amap/amap-jsapi-loader'; //引入
import { yfTypeList } from '@/utils/constant'
// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
    name: 'Yygl'
})
const appStore = useAppStore()
const userStore = useUserStore()

const form = ref({
    roomId: '',
    roomTypeId: '',
    notes: '',
    roomArea: '',
    unitRoomId: '',
    type: ''
})
const ldTabs = ref([])
const ldData = ref([])
const currentIndex = ref(0)
const currentFloor = ref(0)
const searchInfo = ref({
    unitId: JSON.parse(localStorage.getItem('userInfo')).unitId,
    buildingId: '',
    floorId: ''
})
function getUnitBuilding() {
    unitBuilding().then(res => {
        if (res.result) {
            ldData.value = res.result
            ldTabs.value = res.result.map(item => item.name)
            searchInfo.value.buildingId = ldData.value[currentIndex.value].buildingId
            searchInfo.value.floorId = ldData.value[currentIndex.value].floors[currentFloor.value].id
            getunitRoom()
            getFangJianData()
        }
    })
}
const yfTypes = ref([])
const tableData = ref([])
function getunitRoom() {
    unitRoom(searchInfo.value).then(res => {
        tableData.value = res.result
    })
}
function changeRoom(val) {
    let obj = fangjianData.value.find(item => item.id == val)
    form.value.roomArea = obj.roomArea
}
onMounted(() => {
    if (localStorage.getItem('userInfo')) {
        searchInfo.value.unitId = JSON.parse(localStorage.getItem('userInfo')).unitId
    }
    getUnitBuilding()
})

function changeArea(val) {
    allUr({ type: val }).then(res => {
        yfTypes.value = res.result
        form.value.roomTypeId = ''
    })
}
function changeTab(index) {
    currentIndex.value = index
    getUnitBuilding()
}
function changeFloor(item, index) {
    currentFloor.value = index
    getUnitBuilding()
}
const dialog1 = ref(false)
const dialog1Title = ref('新增')
const isEdit = ref(false)
function addRooms() {
    dialog1Title.value = '新增'
    isEdit.value = false
    dialog1.value = true
}
function editRooms(item) {
    form.value = JSON.parse(JSON.stringify(item))
    form.value.roomId = item.id
    form.value.roomArea = item.area
    let obj = yfTypeList.find(item => item.name == item.roomType)
    if (obj) {
        form.value.type = obj.value
        allUr({ type: form.value.type }).then(res => {
            yfTypes.value = res.result
            dialog1Title.value = '编辑'
            isEdit.value = true
            dialog1.value = true
        })
    }
}
const fangjianData = ref([

])
const getFangJianData = async () => {
    const res = await getFangJianList(searchInfo.value.floorId)
    if (res.code == 200) {
        fangjianData.value = res.result
    }
}
const fjForm = ref(null)
const enterDialog = async () => {
    fjForm.value.validate(async (valid) => {
        if (valid) {
            form.value.unitId = searchInfo.value.unitId
            form.value.buildingId = searchInfo.value.buildingId
            form.value.floorId = searchInfo.value.floorId
            let res
            if (isEdit.value) {
                res = await editRoom(form.value)
            } else {
                res = await addRoom(form.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isEdit.value ? '编辑成功' : '添加成功!'
                })
                initForm1()
                getUnitBuilding()
            }
            dialog1.value = false
        }
    })
}
const delUnit = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await delRoom({ unitId: searchInfo.value.unitId, roomId: row.id })
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            initForm1()
            getUnitBuilding()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function handleClose1() {
    initForm1()
    dialog1.value = false
}

function closeDialog1() {
    initForm1()
    dialog1.value = false
}
function initForm1() {
    fjForm.value.resetFields()
    form.value = {
        roomId: '',
        roomTypeId: '',
        notes: '',
        roomArea: '',
        unitRoomId: ''
    }
}

const rules = reactive({
    roomId: [{ required: true, message: '请选择房间名', trigger: 'change' }],
    roomTypeId: [{ required: true, message: '请选择房间类型', trigger: 'change' }],
})
</script>

<style lang="scss" scoped>
.bglxx {
    background: #fff;
    padding: 10px;

    .tabs {
        border: 1px solid #e2e4e8;
        border-bottom: none;
        display: flex;
        height: 40px;
        line-height: 40px;
        background: #edf3fa;

        .tab {
            color: #999;
            cursor: pointer;
            padding: 0 15px;
        }

        .active {
            color: #fff;
            background: #508ee5;
        }
    }
}

.info-box {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;

    .item {
        width: 20%;
        border: 1px solid #698be0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;

        .img {
            margin-right: 10px;
        }
    }
}

.floors {
    display: flex;
    margin: 10px 0;

    .tab {
        color: #999;
        cursor: pointer;
        padding: 0 15px;
    }

    .active {
        color: #fff;
        background: #508ee5;
    }
}
</style>
